import { memo, useState } from "react";
import { PictureWapper } from "./style";
import { useSelector } from "react-redux";
import PictureBrowser from "@/components/picture-browser";

const Picture = memo(() => {
  const { detailInfo } = useSelector((state) => state.detail);
  const [showBrowser, setShowBrowser] = useState(false);
  const [currentIndex, setCurrentIndex] = useState(0);

  function handleSelectImage(index) {
    setCurrentIndex(index);
    setShowBrowser(true);
  }

  return (
    <PictureWapper>
      <div className="pictures">
        <div className="left">
          <div
            className="item"
            onClick={() => {
              handleSelectImage(0);
            }}
          >
            <img src={detailInfo?.picture_urls?.[0]} alt="" />
            <div className="cover"></div>
          </div>
        </div>
        <div className="right">
          {detailInfo?.picture_urls?.slice(1, 5).map((item, index) => {
            return (
              <div
                className="item"
                key={item}
                onClick={() => {
                  handleSelectImage(index + 1);
                }}
              >
                <img src={item} alt="" />
                <div className="cover"></div>
              </div>
            );
          })}
        </div>
      </div>
      <div className="show-btn" onClick={() => setShowBrowser(true)}>
        显示图片
      </div>
      {showBrowser && <PictureBrowser pictureUrls={detailInfo.picture_urls} index={currentIndex} close={() => setShowBrowser(false)} />}
    </PictureWapper>
  );
});

export default Picture;
